<template>
  <div class="activityQuery_main">
    <a-form
      :label-col="{ span: 10 }"
      :wrapper-col="{ span: 14 }"
      label-align="right"
    >
      <a-row :gutter="16" style="margin-left: 0; margin-right: 0">
        <a-col :span="6" style="padding: 0">
          <a-form-item label="应扣服务商会员编号">
            <a-input
              placeholder="应扣服务商会员编号"
              v-model="query.data.agentCode"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6" style="padding: 0" :offset="1">
          <a-form-item label="扣款开始日期">
            <a-range-picker
              :disabledDate="disabledDate"
              @change="onChange"
              format="YYYY-MM-DD"
              v-model="momentDate"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16" style="margin-left: 0; margin-right: 0">
        <a-col :span="6">
          <a-form-item label="扣款周期">
            <a-select
              placeholder="扣款周期"
              :options="cutTypeList"
              v-model="query.data.cutType"
            ></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" :offset="1" style="padding: 0">
          <a-form-item label="订单状态">
            <a-select
              placeholder="订单状态"
              :options="orderStatusList"
              v-model="query.data.orderStatus"
            ></a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 20px">
        <a-col :span="6" :style="{ textAlign: 'left' }">
          <a-row type="flex" justify="space-between">
            <a-col :span="6">
              <a-button
                class="button_sty"
                type="primary"
                :loading="loading"
                @click="handleSearch(1)"
                >查询</a-button
              >
            </a-col>
            <a-col :span="6">
              <a-button class="button_sty" type="primary" @click="reset"
                >重置</a-button
              >
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      size="middle"
      :scroll="{ y: '38vh' }"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="(record) => record.orderNo"
    >
      <span slot="cutType" slot-scope="record">{{
        record.cutType | cutTypeFilter
      }}</span>
      <span slot="orderStatus" slot-scope="record">{{
        record.orderStatus | orderStatusFilter
      }}</span>
      <span slot="amount" slot-scope="record"
        >{{ (record.amount / 100).toFixed(2) }}元</span
      >
      <span slot="actualAmount" slot-scope="record"
        >{{ (record.actualAmount / 100).toFixed(2) }}元</span
      >
      <span slot="action" slot-scope="record">
        <span @click="goDetail(record.orderNo)" style="color: #1890ff"
          >详细</span
        >
      </span>
    </a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 50px"
    />
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  {
    title: "订单号",
    dataIndex: "orderNo",
    width: "10%",
    align: "center",
  },
  {
    title: "应扣服务商会员编号",
    width: "10%",
    align: "center",
    // scopedSlots: { customRender: "externalAccountNo" },
    dataIndex: "agentMemberNo",
  },
  {
    title: "应扣服务商名称",
    dataIndex: "agentMemberName",
    width: "10%",
    align: "center",
  },
  {
    title: "风险SN设备号",
    dataIndex: "terminalSn",
    width: "10%",
    align: "center",
  },
  {
    title: "风险商户名",
    dataIndex: "merchantName",
    width: "10%",
    align: "center",
  },
  {
    title: "所属一级会员编号",
    dataIndex: "topAgentMemberNo",
    width: "11%",
    align: "center",
  },
  {
    title: "扣款开始时间",
    dataIndex: "cutStartTime",
    width: "11%",
    align: "center",
  },
  {
    title: "扣款完成时间",
    dataIndex: "cutEndTime",
    width: "11%",
    align: "center",
  },
  {
    title: "未扣满转上级期限",
    dataIndex: "changeDay",
    width: "11%",
    align: "center",
  },
  {
    title: "订单状态",
    // dataIndex: "orderStatus",
    scopedSlots: { customRender: "orderStatus" },
    width: "11%",
    align: "center",
  },
  {
    title: "扣款周期",
    // dataIndex: "cutType",
    scopedSlots: { customRender: "cutType" },
    width: "11%",
    align: "center",
  },
  {
    title: "应扣金额",
    // dataIndex: "amount",
    scopedSlots: { customRender: "amount" },
    width: "11%",
    align: "center",
  },
  {
    title: "实扣金额",
    // dataIndex: "actualAmount",
    scopedSlots: { customRender: "actualAmount" },
    width: "11%",
    align: "center",
  },
  {
    title: "备注",
    dataIndex: "remark",
    width: "11%",
    align: "center",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    width: "8%",
    align: "center",
  },
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm,
  },

  data() {
    return {
      columns,
      momentDate: null,
      statusList: [
        // { label: "全部", value: "all" },
        // { label: "交易成功", value: "payed" },
        // { label: "交易失败", value: "failed" },
        // { label: "待支付", value: "ordered" },
      ],
      SettleStatusList: [],
      cutTypeList: [
        { label: "全部", value: "" },
        { label: "自身扣款", value: "self" },
        { label: "共享扣款", value: "share" },
      ],
      orderStatusList: [
        { label: "全部", value: "" },
        // { label: "创建订单", value: "create" },
        { label: "订单进行中", value: "doing" },
        { label: "订单完成", value: "finish" },
      ],
      query: {
        data: {
          orderStatus: "",
          startDate: "",
          endDate: "",
          cutType: "",
          agentCode: null,
          requestType: "risk",
        },
        page: 1,
        pageSize: 10,
      },
      pagination: { current: null, total: null },
      form: this.$form.createForm(this),
      list: [],
      loading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14, offset: 1 },
          md: { span: 14, offset: 1 },
        },
      },
    };
  },
  watch: {},
  filters: {
    timeFilter: function (value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    },
    cutTypeFilter(value) {
      if (value) {
        switch (value) {
          case "self":
            return "自身扣款";
            break;
          case "share":
            return "共享扣款";
            break;
          default:
            return value;
            break;
        }
      }
    },
    orderStatusFilter(value) {
      if (value) {
        switch (value) {
          case "create":
            return "创建订单";
            break;
          case "doing":
            return "订单进行中";
            break;
          case "finish":
            return "订单完成";
            break;
          default:
            return value;
            break;
        }
      }
    },
  },
  computed: {},
  created() {},
  mounted() {},
  activated() {
    this.handleSearch();
  },
  methods: {
    moment,
    onPageChange: function (page, pageSize) {
      console.info(page, pageSize);
      this.query.page = page;
      this.query.pageSize = pageSize;
      this.handleSearch(page);
    },
    disabledDate(current) {
      return current > moment().subtract(0, "day");
    },
    onChange(date, dateString) {
      console.log(date, dateString);
      if (dateString[0]) {
        this.query.data.startDate = dateString[0] + " 00:00:00";
      } else {
        this.query.data.startDate = "";
      }
      if (dateString[1]) {
        this.query.data.endDate = dateString[1] + " 23:59:59";
      } else {
        this.query.data.endDate = "";
      }
    },
    reset() {
      this.query.data = {
        orderStatus: "",
        startDate: "",
        endDate: "",
        cutType: "",
        agentCode: null,
        requestType: "risk",
      };
      this.momentDate = null;
      // var date = new Date();
      // this.momentDate = moment(date);
      // var month = date.getMonth();
      // var dates = date.getDate();
      // if (date.getMonth() < 9) {
      //   month = "0" + parseInt(month + 1);
      // } else {
      //   month = month + 1;
      // }
      // if (date.getDate() <= 9) {
      //   dates = "0" + date.getDate();
      // }
      // this.query.data.transDate = date.getFullYear() + "" + month + "" + dates;
    }, //重置

    handleSearch(value) {
      if (value) {
        this.query.page = value;
      }
      this.loading = true;
      console.info(this.query);
      api.getActivityList(
        this.query,
        (res) => {
          console.info(res);
          if (res.code == "OK") {
            this.loading = false;
            this.list = res.list;
            this.pagination.current = res.current;
            this.pagination.total = res.total;
          } else {
            this.loading = false;
            // this.$message.info(res.message)
            this.list = [];
            this.pagination.current = 1;
            this.pagination.total = 1;
            return false;
          }
        },
        (err) => {
          console.log("err", err);
          if (err) {
            this.loading = false;
          }
        }
      );
    },
    goDetail(id) {
      if (id) {
        this.$router.push(`/riskManager/riskCutDetail/${id}`);
      }
      // console.log(id);
    },
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.activityQuery_main {
  /* padding: 30px 40px; */
  padding: 70px;
  background: #fff;
}

.button_sty {
  width: 100%;
}
</style>